<!--
 * @Author       : xiaoxiaoguai
 * @Date         : 2025-06-10 11:32:50
 * @LastEditors  : Please set LastEditors
 * @LastEditTime : 2025-07-25 14:28:14
 * @Description  : 
-->
<!--
 * @Author       : xiaoxiaoguai
 * @Date         : 2025-05-20 16:42:12
 * @LastEditors  : Please set LastEditors
 * @LastEditTime : 2025-06-06 14:56:36
 * @Description  : 
-->
<!-- 滑动切换选项卡演示(标准写法) -->
<template>
	<!-- 使用z-paging-swiper为根节点可以免计算高度 -->
	<z-paging-swiper :swiper-style="{ background: '#f5f5f5',height:'100%' }" :fixed="false">
		<!-- 需要固定在顶部不滚动的view放在slot="top"的view中 -->
		<!-- 注意！此处的z-tabs为独立的组件，可替换为第三方的tabs，若需要使用z-tabs，请在插件市场搜索z-tabs并引入，否则会报插件找不到的错误 -->
		<template #top>
			<uv-navbar :fixed="false" title="订单信息" leftIcon="" bgColor="#f5f5f5" />
			<uv-tabs
				:scrollable="true"
				:itemStyle="{
					color:'#000',
					height: '44px',
					padding: '0 30rpx',
				}"
				:activeStyle="{
					color:'#000',
					fontSize: '32rpx',
					fontWeight: 'bold',
				}"
				:current="current"
				keyName="name"
				lineWidth="55"
				lineHeight="5"
				:lineColor="computedLineColor"
				:list="tabList"
				@change="tabsChange"></uv-tabs>
		</template>
		<!-- swiper必须设置height:100%，因为swiper有默认的高度，只有设置高度100%才可以铺满页面  -->
		<swiper
			class="swiper"
			:current="current"
			@transition="swiperTransition"
			@animationfinish="swiperAnimationfinish">
			<swiper-item class="swiper-item" v-for="(item, index) in tabList" :key="index">
				<!-- 这里的swiper-list-item为demo中为演示用定义的组件，列表及分页代码在swiper-list-item组件内 -->
				<!-- 请注意，swiper-list-item非z-paging内置组件，在自己的项目中必须自己创建，若未创建则会报组件不存在的错误 -->
				<zlist
					:ref="el => (listItemRefs[index] = el)"
					:tabIndex="index"
					@reloadCurrentListForOrder="reloadCurrentListForOrder"
					:currentIndex="current"
					:currentItem="currentItem"></zlist>
			</swiper-item>
		</swiper>
	</z-paging-swiper>
</template>

<script setup>
	import { onHide, onLaunch, onLoad, onShow } from '@dcloudio/uni-app'

	import { ref, onMounted,computed } from 'vue'
	import zlist from './list.vue'
	import { useMainStore } from '@/store/store'
	import { storeToRefs } from 'pinia'
	const main = useMainStore()
	const { themeColor } = storeToRefs(main)
	// tab 数据
	const tabList = ref([
		{ type: -1, name: '全部' },
		{ type: 0, name: '未支付' },
		{ type: 1, name: '制作中' },
		{ type: 2, name: '待取餐' },
		{ type: 4, name: '已完成' },
		{ type: -3, name: '退款单' },
	])
	const computedLineColor = computed(() => {
		return `linear-gradient(to right, ${themeColor.value}, #fff)`
	})
	// 当前选中 tab 的索引
	const current = ref(0)
	const currentItem = ref(tabList.value[current.value])
	// listItemRefs 是一个数组，用于保存所有子组件 ref
	const listItemRefs = ref([])

	// tab 切换事件
	const tabsChange = item => {
		currentItem.value = item
		console.log('tabsChange', item)
		current.value = item.index
	}

	// swiper 正在滑动时（可选）
	const swiperTransition = e => {
		console.log('swiper 滑动中', e.detail.dx)
		// 如果你有 tabsRef，可以调用 .setDx(e.detail.dx)
	}

	// swiper 滑动结束
	const swiperAnimationfinish = e => {
		console.log('滑动结束', e.detail.current)
		currentItem.value = tabList.value[e.detail.current]
		current.value = e.detail.current
	}

	// 手动刷新当前 tab 对应的 list
	const reloadCurrentListForOrder = () => {
		const currentList = listItemRefs.value[current.value]
		console.log(currentList, 'currentList')
		currentList?.reload?.(true)
	}
	onLoad(() => {
		uni.$on('reloadCurrentListForOrder', () => {
			reloadCurrentListForOrder() // 执行刷新操作
		})
	})
	onShow(() => {
		
	})
</script>

<style>
	.swiper {
		height: 100%;
	}
</style>
